<template>
    <div>
        <el-card class="mb">
            <el-input placeholder="请输入关键词搜索" v-model="queryform.keyword"
                style="width: 200px;margin-right: 10px;"></el-input>
            <el-button type="primary" @click="search()" plain>查询</el-button>
            <el-button type="info" @click="research()" plain>重置</el-button>
            <el-button type="warning" @click="add()" style="float: right;" plain>新增</el-button>
        </el-card>
        <el-card>
            <div class="table">
                <el-table :data="tableData" strip>

                    <el-table-column type="index" width="100" label="序号" align="center" sortable></el-table-column>


                    <el-table-column prop="cover" label="设备图片">
                        <template v-slot="scope">
                            <div style="display: flex; align-items: center">
                                <el-image style="width: 40px; height: 40px;" v-if="scope.row.cover"
                                    :src="scope.row.cover" :preview-src-list="[scope.row.cover]"
                                    :preview-teleported="true"></el-image>
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column prop="name" label="设备名称">

                    </el-table-column>

                    <el-table-column prop="nums" label="设备编号">

                    </el-table-column>
                    <el-table-column prop="belongsys" label="所属实验室">

                    </el-table-column>
                    <el-table-column label="使用介绍" width="150" align="center" prop="content">
                        <template #default="scope">
                            <el-button @click="djck(scope.row.descs)">点击查看</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column label="生产厂商" align="center" prop="vender"></el-table-column>
                    <el-table-column label="采购金额(元)" align="center" prop="price"></el-table-column>
                    <el-table-column label="采购日期" align="center" prop="purchasetime"></el-table-column>

                    <el-table-column label="采购负责人" align="center" prop="purchasepeople"></el-table-column>


                    <el-table-column label="设备状态" align="center" prop="status">
                        <template #default="scope">
                            <el-tag v-if="scope.row.status == 0">使用中</el-tag>
                            <el-tag v-if="scope.row.status == 1" type="success">空闲中</el-tag>
                            <el-tag v-if="scope.row.status == 2">维修中</el-tag>


                        </template>
                    </el-table-column>


                    <el-table-column label="操作" align="center" width="200">
                        <template v-slot="scope">

                            <el-button size="mini" type="primary" plain @click="edit(scope.row)">编辑</el-button>
                            <el-button size="mini" type="danger" plain @click="del(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <div class="pagination">
                    <el-pagination background @current-change="handleCurrentChange" :current-page="queryform.pageNo"
                        :page-sizes="[5, 10, 20]" :page-size="queryform.pageSize" layout="total, prev, pager, next"
                        :total="total">
                    </el-pagination>
                </div>
            </div>

        </el-card>
        <el-dialog title="内容" v-model="fromVisible1" width="40%" :close-on-click-modal="false" destroy-on-close>
            <div v-html="newscontent" style="width: 100%;overflow: auto;"></div>
        </el-dialog>

        <el-dialog title="设备" v-model="fromVisible" width="40%" :close-on-click-modal="false" destroy-on-close>
            <el-form :model="form" label-width="100px" style="padding-right: 50px" :rules="rules" ref="formRef">
                <el-form-item label="设备名称" prop="name">
                    <el-input placeholder="请输入设备名称" v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="设备编号" prop="nums">
                    <el-input placeholder="请输入设备编号" v-model="form.nums"></el-input>
                </el-form-item>
                <el-form-item label="所属实验室" prop="name">
                    <el-select v-model="form.sysid" style="width: 100%;" placeholder="请选择所属实验室">
                        <el-option v-for="item in lablist" :label="item.name" :value="item.id"></el-option>

                    </el-select>
                </el-form-item>
                <el-form-item label="设备图片" prop="coverImage">
                    <el-upload class="avatar-uploader avatar" action="http://localhost:9099/api/files/upload"
                        :show-file-list="false" :accept="'.png,.jpg,.jpeg'" :on-success="handleAvatarSuccess">
                        <img v-if="form.cover !== ''" :src="form.cover" class="avatar">
                        <el-icon v-else class="avatar-uploader-icon">
                            <Plus />
                        </el-icon>
                        <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
                    </el-upload>

                </el-form-item>
                <el-form-item label="生产厂商" prop="title">
                    <el-input placeholder="请输入生产厂商" v-model="form.vender"></el-input>
                </el-form-item>
                <el-form-item label="采购金额" prop="title">
                    <el-input-number v-model="form.price" :min="1" />
                </el-form-item>
                <el-form-item label="采购日期" prop="title">
                    <el-date-picker v-model="form.purchasetime" type="date" placeholder="请选择" style="width:100%"
                        format="YYYY/MM/DD" value-format="YYYY-MM-DD" />
                </el-form-item>
                <el-form-item label="采购负责人" prop="title">
                    <el-input placeholder="请输入采购负责人" v-model="form.purchasepeople"></el-input>
                </el-form-item>
                <el-form-item label="设备状态" prop="title">
                    <el-radio-group v-model="form.status" size="large" fill="#6cf">
                        <el-radio-button label="使用中" :value="0" />
                        <el-radio-button label="空闲中" :value="1" />
                        <el-radio-button label="维修中" :value="2" />
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="文件内容">
                    <div id="editor"></div>
                </el-form-item>

            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="fromVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script setup>

import E from 'wangeditor';
import { ElMessage, ElMessageBox } from "element-plus";
import { Plus } from '@element-plus/icons-vue'
import { onMounted, readonly, ref } from "vue";
import service from "../request/Request";
const keyword = ref("")
const fromVisible = ref(false)
const newscontent = ref("")
const fromVisible1 = ref(false)
const form = ref({});
const lablist = ref([])
const rules = {
    name: [
        { required: true, message: '请输入名称', trigger: 'blur' },
    ],
    nums: [
        { required: true, message: '请输入设备编号', trigger: 'blur' },
    ],

}
const formRef = ref();
const edit = (row) => {
    form.value = row
    form.value.cover = form.value.cover == null ? '' : form.value.cover
    fromVisible.value = true
    setTimeout(() => {
        initWangEditor(row.descs)
    }, 100)
}
const djck = (content) => {
    fromVisible1.value = true;
    newscontent.value = content
}
const save = () => {
    formRef.value.validate(async (valid) => {
        console.log(valid)
        if (valid) {

            form.value.descs = editor.value.txt.html()


            let url = form.value.id ? "/device/edit" : "/device/add";
            const res = await service.post(url,
                form.value
            )
            console.log(res)
            if (res.code == 200) {
                getlist()
                fromVisible.value = false
                ElMessage({
                    message: res.msg,
                    type: "success"
                })
            }
        }

    })

}
const typedata = ref([])
const avatar = ref("")
const editor = ref(null)
const queryform = ref({

    pageNo: 1,
    pageSize: 10,
    keyword: ""
});
const tableData = ref([])
const total = ref(0)
const handleCurrentChange = (e) => {
    queryform.value.pageNo = e;
    getlist()
}
const add = () => {
    fromVisible.value = true
    form.value = {}
    form.value.cover = ""
    form.value.price = 1
    console.log("1233")
    setTimeout(() => {
        initWangEditor("")
    }, 100)

}
onMounted(() => {
    getlist()
    getall()
})
const getall = async () => {
    const res = await service.get("/lab/all");
    console.log(res)
    lablist.value = res.data
}

const search = () => {
    queryform.value.pageNo = 1;
    getlist()
}
const research = () => {
    queryform.value = {}
    queryform.value.pageNo = 1;
    queryform.value.pageSize = 10;
    queryform.value.type = ""
    getlist()
}
const handleAvatarSuccess = (e) => {
    form.value.cover = e.data
}
const del = (id) => {
    ElMessageBox.confirm(
        '是否确认删除？',
        '确认信息',
        {
            confirmButtonText: 'OK',
            cancelButtonText: 'Cancel',
            type: 'warning',
        }
    )
        .then(async () => {
            const res = await service.post("/device/delete", { id: id })
            if (res.code == 200) {
                ElMessage({
                    type: "success",
                    message: "成功"
                })
                getlist()
            }

        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: 'Delete canceled',
            })
        })
}
const getlist = async () => {
    const res = await service.post("/device/list", queryform.value
    )
    console.log(res)
    tableData.value = res.data.records
    total.value = res.data.total
}
const initWangEditor = (content) => { //用户输入的文本作为参数传进函数。
    if (editor.value) {
        editor.value.destroy();
        editor.value = null;
    }
    editor.value = new E('#editor') //2.新建一个editor，赋值给我们一开始定义的editor，并渲染在iD为#editor的元素里
    editor.value.config.placeholder = '请输入内容' // 配置编辑器默认展示的文本
    editor.value.config.uploadFileName = 'file' //配置编辑器文件上传的名称
    editor.value.config.uploadImgServer = 'http://localhost:9099/api/files/uploadeditor'  //配置编辑器文件上传的接口
    editor.value.create() //执行创建编辑器
    console.log("12345")
    setTimeout(() => { //延时函数，这里没有设置延时时间，即为实时获取编辑器的文本给到this.editor.txt.html()。
        editor.value.txt.html(content)
    })


}

</script>
<style scoped>
.mb {
    margin-bottom: 10px;
}
</style>
<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px !important;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
